<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8"/>
    <style>
        html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
        .canvas{
            position: relative;
            background:/*url("images/timg.jpeg") no-repeat;*/#21ceff;
            width: 100%;
            height: 100%;
            top:0%;
            left: 0%;
        }
        .canvasExt{
            position: fixed;
            background: #faff29;
            width: 100%;
            height: 100%;
            top: 0%;
            left :0%;
        }

    </style>
</head>
<body>
<!--<textarea class="textarea-log" top="0" cols="30" rows="10"></textarea>-->

<div class="canvas" id="canvas_div" align="center"  style="z-index: 1;">
    <canvas id="myCanvas" class="canvasExt"  style=" border:1px solid #d3d3d3;background: #3affff;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>

<script>
    var c=document.getElementById("myCanvas");
    //var ctxW = window.innerWidth * 0.4;
    //var ctxH = ctxW * 1.44;
    //c.attributes('width',ctxW);
    //c.attributes('height',ctxH);

    var logEl = document.querySelector('.textarea-log');
    var startDraw = 0;
    /*register canvas touch handler*/
    c.addEventListener('touchstart',touchDown);
    c.addEventListener('touchend',touchUp);
    c.addEventListener('touchmove',touchMove);
    /*c.onmousedown = touchDown();
     c.onmouseup = touchUp();
     c.onmousemove = touchMove();*/

    var canvas_div = document.getElementById("canvas_div");

    var ctx=c.getContext("2d");
    var img=new Image();//document.getElementById("tulip");
    img.src = "ui_icon_home_88.png";//"./images/test.png";
    var width = 0;//img.width/7;
    var height = 0;//img.height;
    var i = 0;
    var index = 0;
    var preindex = 0;
    var time;
    var line = document.getElementById("line");

    draw();
    function draw(){
        img.onload = function(){
            width = img.width/7;
            height = img.height;
            drawByIndex(0);
        }
    }

    function drawCycle(){
        ctx.save();
        ctx.clearRect(0,0, c.width, c.height);
        ctx.drawImage( img, width * (i++ % 7), 0, width, height, (c.width - width)/2, 0, c.width, c.height );
        ctx.restore();
    }
    function drawSubtraction(){
        ctx.save();
        ctx.clearRect(0,0, c.width, c.height);
        //ctx.drawImage(img);
        //ctx.drawImage(img, width*(index),0, width,height);
        ctx.drawImage( img, width * (index), 0, width, height, (c.width - width)/2, 0, width, height );
        ctx.restore();
        if(index<= 0){
            clearInterval(time);
        }else{
            index--;
        }
    }

    function drawByIndex(index1)
    {
        //logEvent("index1 = "+index1);
        if(index1>=7){
            return;
        }
        ctx.save();
        ctx.clearRect(0,0, c.width, c.height);
        //ctx.drawImage(img, 0,0,width,height);
        ctx.drawImage(img, 0, 0, width, height, (c.width -width)/2, 0, width, height);
        //ctx.drawImage( img, width * (index1), 0, width, height, (c.width - width)/2, 0, c.width, c.height );

        ctx.restore();
    }

    function touchDown(e){
        //check if in area
        var x = e.touches[0].pageX;
        var y = e.touches[0].pageY;
        var start_x = window.innerWidth/2 -15;
        var end_x = start_x + 30;
        //logEvent("x ="+x+"start_x="+start_x+"end_x="+end_x);
        if(x >=start_x && x <= end_x ) {
            startDraw = 1;
        }
        event.preventDefault();

    }

    function animationBack(index1){
        time = setInterval("drawSubtraction()",200);
    }

    function touchUp(e){
        startDraw = 0;
        preindex = 0;
        //animation back
        if(index >= 6){
            index = 6;
        }
        animationBack(index);
    }

    function getCurrentIndex(x,y){

        var length = c.offsetHeight/7;
        var cur_index = 20;
        //logEvent("c.height = "+ c.height+"c.offsetHeight="+ c.offsetHeight);
        //logEvent("x="+x+"y="+y+"length="+length+"windowHeight"+window.innerHeight);
        //if(x >=start_x && x <= end_x ){
        cur_index = parseInt((y - window.innerHeight*0.3) / length);
        //}
        //logEvent("curindex"+cur_index);
        return cur_index;
    }

    function touchMove(e){
        if(0 == startDraw){
            return;
        }
        var total_height = c.height;
        var total_width = c.width;
        var x = e.touches[0].pageX;
        var y = e.touches[0].pageY;
        var get_index = getCurrentIndex(x, y);
        if(20 != get_index){
            index = get_index;
            if(index != preindex){
                preindex = index;
                drawByIndex(index);
            }
        }
    }

    /*log*/
    function logEvent(type) {
        logEl.innerHTML = logEl.innerHTML + '\n' + new Date().toLocaleTimeString() + ' - ' + type;
        logEl.scrollTop = logEl.scrollHeight;
    }
</script>
</body>
</html>
